<!--  -->
<template>
    <div class=''
        style="height:100vh; display: flex; align-items:center; justify-content: center; background-color: skyblue;">
        <div style="display: flex; background-color: white; width:80%; border-radius:5px; overflow: hidden;">
            <div style="flex:1;">
                <img style="width:100%" src="@/assets/register1.png" alt="">
            </div>

            <div style="flex: 1; display: flex; aligin-item:center; justify-content: center;">
                <el-form :model="user" style="width:80%;" :rules="rules" ref="registerRef" >
                    <div style="font-size:20px; font-weight: bold; text-align: center;  margin-top: 50px;  margin-bottom: 30px;">
                        欢迎注册后台管理系统
                    </div>

                    <!-- 账户 -->
                    <el-form-item prop="username">
                        <el-input size="medium" prefix-icon="el-icon-user" placeholder="请输入账号" v-model="user.username">

                        </el-input>
                    </el-form-item>

                    <!-- 密码 -->
                    <el-form-item prop="password">
                        <el-input size="medium" prefix-icon="el-icon-lock" placeholder="请输入密码" show-password
                            v-model="user.password">
                        </el-input>
                    </el-form-item>

                    <el-form-item prop="confirmPass">
                        <el-input size="medium" prefix-icon="el-icon-lock" placeholder="请确认密码" show-password
                            v-model="user.confirmPass">
                        </el-input>
                    </el-form-item>


                        <!-- 注册 -->
                        <el-form-item>
                            <el-button type="primary" style="width:100%" @click="register">注册</el-button>
                        </el-form-item>
                        <!-- 注册 -->
                        <div style="display:flex;">
                            <div style="flex:1;">
                                还没有账号？请
                                <span style="color:blue; cursor:pointer;"  @click="$router.push('/login')">登录</span>
                            </div>

                            <div style="flex:1; text-align: right;">
                                <span style="color: blue; cursor: pointer;">忘记密码</span>
                            </div>
                        </div>


                </el-form>
            </div>


        </div>

    </div>
</template>

<script>
import ValidCode from '@/components/ValidCode'
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
    //import引入的组件需要注入到对象中才能使用
    name: "Login",
    components: {
        ValidCode
    },
    data() {
       //自定义校验 验证码
       const validateCode = (rule,value,callback)=>{
          if(value ===''){
            callback(new Error('请输入验证码'))
          }else if(value.toLowerCase() !== this.code){   
             callback(new Error('验证码错误'))
          }else{
             callback();
          }
       };

        //这里存放数据
        return {
            user: {
                confirmPass:'',
                username: '',
                password: '',
            },
            rules: {
                username:[
                    {required:true,message:'请输入账号',trigger:'blur'},
                ],
                password:[
                    {required:true,message:'请输入密码',trigger:'blur'},
                ],
                confirmPass:[
                     {required:true,message:'请确认密码',trigger:'blur'},
                ]
            },
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        getCode(code){
            // console.log(code);
            this.code = code.toLowerCase();
        },
        // 登录
        register(){
            this.$refs['registerRef'].validate((valid)=>{
                if(valid){
                    //验证通过
                    this.$carouselmap({
                        url: "/api/eventsweb/user/register",
                        method: "POST",
                        data: this.user,
                    }).then((res)=>{
                        if(res.data.code=== '200' ){
                           this.$router.push('/login')
                           this.$message.success('注册成功')
                        }else{
                            this.$message.error(res.data.message)
                        }
                    })
                }
            })
            console.log(this.code);
        }

    },
   
}
</script>
<style></style>